<template>
<div>
  <el-steps :active="active" simple>
    <el-step title="创建考试信息" icon="el-icon-edit"></el-step>
    <el-step title="创建试卷信息" icon="el-icon-upload"></el-step>
    <el-step title="上传题目图片" icon="el-icon-picture"></el-step>
  </el-steps>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
           class="demo-ruleForm" label-position="left" :disabled="isFirst" v-show="active!==3">
    <el-form-item label="考试名称" prop="name"  >
      <el-input v-model="ruleForm.name" ></el-input>
    </el-form-item>
    <el-form-item label="考试年级" prop="grades" >
      <el-checkbox-group v-model="ruleForm.grades">
        <el-checkbox label="2021级" name="grades"></el-checkbox>
        <el-checkbox label="2022级" name="grades"></el-checkbox>
        <el-checkbox label="2023级" name="grades"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="考试科目" prop="subjects" v-show="active===1||2">
      <el-checkbox-group v-model="ruleForm.subjects">
        <el-checkbox label="语文" name="subjects"></el-checkbox>
        <el-checkbox label="数学" name="subjects"></el-checkbox>
        <el-checkbox label="英语" name="subjects"></el-checkbox>
        <el-checkbox label="物理" name="subjects"></el-checkbox>
        <el-checkbox label="化学" name="subjects"></el-checkbox>
        <el-checkbox label="生物" name="subjects"></el-checkbox>
        <el-checkbox label="历史" name="subjects"></el-checkbox>
        <el-checkbox label="政治" name="subjects"></el-checkbox>
        <el-checkbox label="地理" name="subjects"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="备注" prop="desc" v-show="active===1">
      <el-input type="textarea" v-model="ruleForm.desc"></el-input>
    </el-form-item>
    <el-form-item v-show="active===1">
      <el-button @click.prevent="resetForm('ruleForm')">下一步</el-button>
    </el-form-item>
  </el-form>
<!--第二步-->
  <el-row :gutter="10" v-show="active===2">
    <el-col :span="6">
      <el-descriptions title="试卷信息">
        <el-descriptions-item label="年级">2023级</el-descriptions-item>
        <el-descriptions-item label="科目">数学</el-descriptions-item>
      </el-descriptions>
    </el-col>
    <el-col :span="18">
      <el-form v-show="active===2"  >
        <el-form-item label="" >
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-form>
    <el-form-item v-show="active===2">
      <el-button type="primary" @click.prevent="submitForm('ruleForm')">上一步</el-button>
      <el-button @click.prevent="resetForm('ruleForm')">下一步</el-button>
    </el-form-item>
  </el-form>
<!-- 第三步-->
  <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
      :file-list="fileList"
      v-show="active===3"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</div>
</template>

<script>
export default {
  name: "CreateExam",
  data() {
    return {
      active:1,
      isFirst:false,
      ruleForm: {
        name: '',
        region: '',
        grades:[],
        date1: '',
        date2: '',
        delivery: false,
        subjects: [],
        resource: '',
        desc: ''
      },
      papers:[
        {},
      ],
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        subjects: [
          { type: 'array', required: true, message: '请至少选择一个考试科目', trigger: 'change' }
        ],
        grades: [
          { type: 'array', required: true, message: '请至少选择一个考试年级', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },
      fileList: [
        {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
        {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
        ]
    }
  },
  methods: {
    submitForm(formName) {
      if(this.active>1){
        this.active--;
        if (this.active===1){
          this.isFirst=false;
        }
      };
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert('submit!');
      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });
    },
    resetForm(formName) {
      if(this.active<3){
        this.active++;
        this.isFirst=true
        this.ruleForm.name=this.$refs.nameInput.value
        this.$forceUpdate();
      };
      // this.$refs[formName].resetFields();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    }
  },
}
</script>

<style scoped>

</style>